<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-动画显示饼形图-改良-2-加文本</title>
    <style>
    #demo { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="demo" width="600" height="500"></canvas>
</body>
<script>
    var canvas = document.querySelectorAll( '#demo' )[ 0 ];
    var context = canvas.getContext( '2d' );

    
    var data = [
        { color: 'red', range: [ 0, 30 ] },
        { color: 'green', range: [ 30, 120 ] },
        { color: 'blue', range: [ 120, 180 ] },
        { color: 'gray', range: [ 180, 250 ] },
        { color: 'orange', range: [ 250, 300 ] },
        { color: 'purple', range: [ 300, 360 ] }
    ];

    // 
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var r = 150;
    var angleStart = -90;
    var tor = function ( angle ) {
        return Math.PI * angle / 180; 
    };
    var distance = 20;

    var angleStart = -90;
    var angleSpeed = 1.5;
    var angle = 0;
    var angleHistory;

    var id = setInterval(function () {
        canvas.width = canvas.width;
        // 从 0 绘制到 angle 所在的角度
        angle += angleSpeed;

        if ( angle >= 360 ) {
            angle = 360;
            clearInterval( id );
            document.title = ' over ';
        }

        var angleEnd;
        for ( var i = 0; i < data.length; i++ ) {
            // 判断绘制
            context.beginPath();
            context.moveTo( x, y ); 
            context.fillStyle = data[ i ].color;
            if ( angle >= data[ i ].range[ 0 ] && angle < data[ i ].range[ 1 ] ) {
                angleEnd = angle;
            } else {
                angleEnd = data[ i ].range[ 1 ];
            }


            // 加文本
            // var txt_x = x + ( r + 10 ) * Math.cos( 
            // 	tor ( angleStart + data[ i ].range[ 0 ] + ( data[ i ].range[ 1 ] - data[ i ].range[ 0 ] ) / 2 )
            // ); 
            // var txt_y = y + ( r + 10 ) * Math.sin( 
            //     tor ( angleStart + data[ i ].range[ 0 ] + ( data[ i ].range[ 1 ] - data[ i ].range[ 0 ] ) / 2 )
            // ); 
            // context.fillText( data[ i ].color, txt_x, txt_y );

             var txt_x = x + ( r + distance ) * Math.cos( 
            	tor ( angleStart + data[ i ].range[ 0 ] + ( angleEnd - data[ i ].range[ 0 ] ) / 2 )
            ); 
            var txt_y = y + ( r + distance ) * Math.sin( 
                tor ( angleStart + data[ i ].range[ 0 ] + ( angleEnd - data[ i ].range[ 0 ] ) / 2 )
            ); 
            // 设置对齐方式
            if ( txt_x > x ) {
                context.textAlign = 'left';
            } else {
                context.textAlign = 'right';
            }
            if ( txt_y > y ) {
                context.textBaseline = 'top';
            } else {
                context.textBaseline = 'bottom';
            }




            context.fillText( data[ i ].color, txt_x, txt_y );



            context.arc( x, y, r, tor ( angleStart + data[ i ].range[ 0 ] ), tor ( angleStart + angleEnd ) );
            context.fill();
            
            if ( angleEnd >= angle ) break;
        }
        

    }, 16.67);
    

</script>
</html>